<template>
	<view class="wordinput">
		<u-navbar :is-back="true" :title="flag" class="navbar" :custom-back="back">
			<view class="navbar-right flex" slot="right" @click="confirm">
				确定
			</view>
		</u-navbar>
		<div class="word-content flex">
			<u-tag class="tag" :text="item.label" :mode="item.check ? 'dark' : 'plain'" v-for="(item, index) in list" :key="index" @click="selectWord(index)" />
		</div>
		
		<div class="input-box flex">
			<u-input v-model="value" type="text" :border="true" />
			<u-button class="btn" type="primary" @click="add">添加</u-button>
		</div>
		<div class="btns flex">
			<u-icon class="btn" name="trash" color="#666" size="42" @click="del"></u-icon>
			<u-icon class="btn" name="file-text" color="#666" size="42" @click="copy"></u-icon>
		</div>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	props: {
		flag: {
			type: String,
			default: "",
		},
	},
	name:"wordInput",
	data() {
		return {
			value: "",
			list: this.$store.state.inputPageWord,
		};
	},
	methods: {
		back() {
			this.$store.commit("isInputPageInAddHandle", false);
		},
		add() {
			if(!this.value.length){
				this.$refs.uToast.show({
					title: "分类名称不能为空",
					type: "warning",
				});
				return;
			}
			let arr = this.value.split(" ");
			let add_arr = arr.map(item=>{
				return {
					label: item,
					check: false
				}
			});
			this.list = [...this.list, ...add_arr];
			this.value = "";
		},
		selectWord(index) {
			this.list[index].check = !this.list[index].check;
		},
		del() {
			let arr = this.list.filter(item=>item.check);
			let arr_new = this.list.filter(item=>!arr.includes(item));
			this.list = arr_new;
		},
		copy() {
			let str = this.list.map(item=>item.label).join(" ");
			
			uni.setClipboardData({
				data: str,
				showToast: false,
				success: ()=>{
					this.$refs.uToast.show({
						title: "复制成功",
						type: "success",
					});
				}
			});
		},
		confirm() {
			let str = this.list.map(item=>item.label).join(" ");
			let data = {
				type: this.flag,
				content: str
			};
			this.$emit("sendKeyWords", data);
			this.back();
		},
	},
}
</script>

<style lang="scss">
.wordinput{
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #F2F3F7;
}
.navbar-right{
	cursor: pointer;
	font-size: 32rpx;
	color: #1E62FC;
	line-height: 1;
	margin-right: 20rpx;
}
.input-box{
	position: absolute;
	z-index: 1;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 20rpx;
	background-color: #fff;
	box-sizing: border-box;
	.btn{
		margin-left: 10rpx;
	}
}
.word-content{
	padding: 20rpx;
	box-sizing: border-box;
	flex-wrap: wrap;
	
	.tag{
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
}
.btns{
	position: fixed;
	z-index: 1;
	right: 30rpx;
	bottom: 150rpx;
	.btn{
		margin-left: 10rpx;
		cursor: pointer;
	}
}
</style>